<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchInfo"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="VaR:" prop="VaR.lower_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.VaR.lower_limit"
                placeholder="lower limit"
              ></el-input>
            </el-form-item>
            <el-form-item><i class="el-icon-right"></i></el-form-item>
            <el-form-item prop="VaR.upper_limit">
              <el-input
                style="width: 120px"
                v-model="searchInfo.VaR.upper_limit"
                placeholder="upper limit"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="Model:">
              <el-radio-group v-model="searchInfo.model">
                <el-radio label="Gail">Gail</el-radio>
                <el-radio label="Claus">Claus</el-radio>
                <el-radio label="All">All</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="18">
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <br />
    <div
      :style="{ height: '500%', width: '100%' }"
      ref="myageDistribution"
    ></div>
  </div>
</template>

<script>
export default {
  name: "AgeDistribution",
  data() {
    return {
      option: {
        title: {
          text: "Age Distribution",
          textStyle: {
            fontSize: 25,
          },
          subtext: "Risk of breast cancer at different ages",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 15,
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            fontSize: 15,
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //保存图片
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "15~30" },
              { value: 735, name: "31~45" },
              { value: 580, name: "46~60" },
              { value: 484, name: "61~75" },
              { value: 300, name: "76~90" },
            ],
          },
        ],
      },
      searchInfo: {
        VaR: { lower_limit: "0%", upper_limit: "100%" },
        model: "All",
      },
    };
  },
  mounted() {
    this.confirmName();
  },
  methods: {
    ageDistribution() {
      let myChart = this.$echarts.init(this.$refs.myageDistribution);
      myChart.setOption(this.option);
    },
    //清空搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.option.series[0].data = [
        { value: 1048, name: "15~30" },
        { value: 735, name: "31~45" },
        { value: 580, name: "46~60" },
        { value: 484, name: "61~75" },
        { value: 300, name: "76~90" },
      ];

      this.confirmName();
    },
    searchForm(formName) {
      //搜索表单信息
      console.log(formName);
      this.option.series[0].data = [
        { value: 148, name: "15~30" },
        { value: 35, name: "31~45" },
        { value: 80, name: "46~60" },
        { value: 84, name: "61~75" },
        { value: 60, name: "76~90" },
      ];
      this.confirmName();
    },
    confirmName() {
      this.option.series[0].name =
        "Risk of breast cancer : " +
        this.searchInfo.VaR.lower_limit +
        " ~ " +
        this.searchInfo.VaR.upper_limit;
      this.ageDistribution();
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>